HTMLify
index.html
Views: 482 | Author: khushi
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> <html> <head> <title>OCTANET || TASK2</title> <link href="todo.css" rel="stylesheet"> </head> <body> <div class="contain"> <div class="box"> <h1>TO-DO-LIST</h1> <input type="text" placeholder="ADD TASK..." id="inputbox"> <ul id="list"> </ul> </div> </div> <script> let inputbox = document.querySelector('#inputbox'); let list = document.querySelector('#list'); inputbox.addEventListener("keyup", function(event) { if (event.key === "Enter") { addItem(this.value); this.value = ""; } }) let addItem = (task) => { let listItem = document.createElement("li"); listItem.innerHTML = `${task} <i></i>`; listItem.addEventListener("click", function() { this.classList.toggle('done'); }) listItem.querySelector("i").addEventListener("click",function(){ listItem.remove(); }) list.appendChild(listItem); }; </script> </body> </html> |